<template>
    <div>
      <mavon-editor v-model="content"></mavon-editor>
      <div class="preview" v-html="content"></div>
    </div>
  </template>
  
  <script>
  import { mavonEditor } from "mavon-editor";
  import "mavon-editor/dist/css/index.css";
  import MarkdownIt from "markdown-it";
  import katex from "markdown-it-katex";
  import "katex/dist/katex.min.css";
  
  export default {
    name: "MavonEditorView",
    components: {
      mavonEditor,
    },
    data() {
      return {
        content:
          "这是一段输出测试文字，用来模拟Ai回答问题。\n ``` 测试 ```  \n  \[ f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h} \]",
      };
    },
    mounted() {
      // 初始化 MarkdownIt 实例并使用 katex 插件
      this.md = new MarkdownIt();
      this.md.use(katex);
    },
    computed: {
      renderedContent() {
        // 使用 MarkdownIt 转换 markdown 到 HTML，并使用 katex 渲染 LaTeX 公式
        return this.md.render(this.content);
      },
    },
    methods: {
      
    },
  };
  </script>
  
  <style scoped>
  .preview {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  </style>
  